/* eslint-disable vue/valid-v-bind */
<template>
  <!-- //   先介绍一下背景
//   首先头顶上有一个保存按钮,用来上传图片的
//   下面是内容 , 有一个input框,type=file.. 有一个button, 用来代替input去选择文件
//   我的后台是要从请求的api里拿到上传的url地址,再通过头顶的保存按钮上传,之后返回一个图片的url地址,动态绑定到页面的img标签上显示出来
//   参考了网上一些写法, 我这里只为了实现功能, 不做其它处理

// 样式就不写了, 最后贴张图 -->
  <div class="main">
    <!-- 保存可以参考这个方法 -->
    <!-- <div @click="onUpload">保存</div> -->
    <!-- //顶部上传按钮 -->
    <el-button type="button" class="xunzeimage" @click="onPickFile"><i class="el-icon-plus"></i></el-button>
    <input ref="fileInput" type="file" accept="image/*" style="display: none" @change="getFile" />
    <div class="imgUrl">
      <div v-if="imageUrl">
        <el-button type="text" @click="delImg"><i class="el-icon-close"></i></el-button>
        <img :src="'data:image/png;base64,' + imageUrl" />
      </div>
    </div>
    <!-- <img :src="imageUrl" /> -->
  </div>
</template>

<script>
// import demoApi from "@/api/document/demo";
export default {
  // name: "whatever",
  props: {
    postUrl: {
      type: String,
      default: () => ''
    },
    title: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      imageUrl: "", // img绑定的src地址
      postUrls: "", // 需要上传到的地址
      name: ""
    };
  },
  watch: {
    postUrl (val) {
      this.imageUrl = val
      if (val !== '') {
        this.$emit('child-event', this.imageUrl)
      }
    }
  },
  created () {
  },
  methods: {
    // 第二步:再来写个方法, button代替input选择图片
    onPickFile () {
      this.$refs.fileInput.click();
    },
    delImg () {
      this.imageUrl = ''
      this.$emit('child-event', this.imageUrl)
    },
    // 第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile (event) {
      if (event) {
        const files = event.target.files;
        const fileSize = files[files.length - 1].size;
        let filename = files[files.length - 1].name; // 只有一个文件
        this.name = filename
        if(fileSize>1048576){
          this.$message.warning('请不要上传超过1MB的图片!')
          return
        }
        this.$emit('child-event', files[files.length - 1])
        if (filename.lastIndexOf(".") <= 0) {
          return this.$message.error("请添加一张图片!"); // 判断图片是否有效
        }
        const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
        // fileReader.readAsDataURL(files[files.length - 1]);
        fileReader.readAsBinaryString(files[files.length - 1]);
        fileReader.addEventListener("load", () => {
          this.imageUrl = window.btoa(fileReader.result.toString());
        });
      }
    },
    clearImageUrl () {
      this.imageUrl = ''
    },
    // 第四步: 上传文件了
    // onUpload(event) {
    //   console.log(event);
    //   event.preventDefault();
    //   let fd = new FormData(); //内置方法new FormData()  新建一个表格
    //   fd.append("file", this.image); //把image添加进去
    //   console.log(this.image); //(       第二次有效打印           )
    //   axios
    //     .post(this.postUrl, fd)
    //     .then(res => {
    //       //第一个参:this.postUrl就是上面保存好的要上传的地址
    //       console.log(res); //(      第三次有效打印    )
    //       if (res.status === 200 && res.data) {
    //         let data = res.data.data;
    //         let imageUrl = data.url; //上传成功 , 后台返回了一个图片地址
    //         this.imageUrl = imageUrl;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;

  .xunzeimage {
    border: 1px solid #6ecae3;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    line-height: 40px;
    border-radius: 4px;
    color: rgb(161, 154, 154);
    font-weight: 600;

    i {
      font-size: 40px;
    }
  }

  .imgUrl {
    width: 40px;
    position: relative;

    div {
      width: 100%;
      position: relative;

      .el-button {
        display: none;
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }

    img {
      width: 100%;
      margin: 0px 10px;
    }
  }

  .imgUrl:hover {
    .el-button {
      display: block;
    }
  }

  h4 {
    margin: 0;
    padding: 0;
  }
}
</style>
